<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button
        class="filter-item"
        style="margin-left: 10px"
        type="success"
        icon="el-icon-plus"
        @click="handleCreate"
      >
        新门店
      </el-button>
      <el-input
        v-model="sname"
        placeholder="门店名称"
        style="width: 200px; margin-left: 10px"
        class="filter-item"
      />
      <el-input
        v-model="scode"
        placeholder="门店编号"
        style="width: 200px; margin-left: 10px"
        class="filter-item"
      />
      <el-button
        class="filter-item"
        style="margin-left: 10px"
        type="primary"
        icon="el-icon-search"
        @click="fetchData"
      >
        搜索门店
      </el-button>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column
        prop="code"
        label="门店编号"
        align="center"
        width="150"
      />
      <el-table-column
        prop="sname"
        label="门店名称"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column
        label="操作"
        align="center"
        width="300"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="{ row }">
          <el-button
            type="primary"
            style="width: 100px"
            @click="handleUpdate(row.sname, row.code, row.id)"
          >
            输入
          </el-button>
          <el-button
            type="success"
            style="width: 100px"
            @click="showSheet(row.id, row.code, row.sname)"
          >
            诊断报告
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="fetchData"
    />

    <el-dialog
      class="kanyu-dialog"
      title="新门店"
      :visible.sync="dialogFormVisible"
      style="margin-top: -80px"
    >
      <el-form
        ref="dataForm"
        :model="salonObj"
        label-width="110px"
        style="margin-right: 30px"
        :rules="rules"
      >
        <el-form-item label="店铺全称" prop="sname">
          <el-input v-model="salonObj.sname" />
        </el-form-item>
        <el-form-item label="店家地址">
          <div style="display: grid">
            <el-cascader
              v-model="selectedOptions"
              :options="areaSelectData"
              style="width: 260px"
              :filterable="true"
              size="medium"
              @change="locationHandleChange"
            />
            <el-input
              v-model="addr2"
              autocomplete="off"
              style="width: 76%; margintop: 10px"
              placeholder="街道门牌号"
            />
          </div>
        </el-form-item>
        <!-- <el-form-item label="大B端">
          <el-input v-model="salonObj.bigbend" />
        </el-form-item> -->
        <el-form-item label="店铺业态">
          <el-checkbox-group v-model="checkList">
            <el-checkbox label="1">【生美】美睫美甲纹绣</el-checkbox>
            <el-checkbox label="2">【生美】面（头）部类</el-checkbox>
            <el-checkbox label="3">【生美】身体类</el-checkbox>
            <el-checkbox label="4">【生美】中医养生类</el-checkbox>
            <el-checkbox label="5">【生美】大健康类</el-checkbox>
            <el-checkbox label="6">【轻医美机构】</el-checkbox>
            <el-checkbox label="7">【综合医美机构】</el-checkbox>
            <el-checkbox label="8">【异业】服务女性的非美业</el-checkbox>
            <el-checkbox label="9">其他</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="12" :offset="0">
            <el-form-item label="店铺面积">
              <el-input-number
                v-model="salonObj.area"
                :min="1"
                :controls="false"
              />
              · 平米
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item label="店铺人数">
              <el-input-number
                v-model="salonObj.cnumber"
                :min="1"
                :controls="false"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="开发人员">
          <el-input v-model="salonObj.developer" />
        </el-form-item>
        <!-- <el-form-item label="沟通详情">
          <el-input
            v-model="salonObj.chat"
            :autosize="{ minRows: 1, maxRows: 2 }"
            type="textarea"
          />
        </el-form-item> -->
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false"> 取消 </el-button>
        <el-button type="primary" @click="createSalon"> 提交 </el-button>
      </div>
    </el-dialog>

    <el-dialog
      class="diag-dialog"
      title="."
      style="margin-top: 0"
      :visible.sync="dialogFormVisible2"
    >
      <el-row :gutter="20" style="margin: 0px 20px 10px">
        <el-col :span="12" :offset="0" style="text-align: center">门店名称：{{ diagname }}</el-col>
        <el-col :span="12" :offset="0" style="text-align: center">门店编号：{{ diagcode }}</el-col>
      </el-row>
      <!-- <el-form :model="diagObj" label-width="110px" style="text-align: center;">
      </el-form> -->

      <Score :score.sync="conObj.tjc" capture="团队决策力" />
      <Score :score.sync="conObj.tgl" capture="团队管理力" />
      <Score :score.sync="conObj.tcj" capture="团队成交力" />
      <Score :score.sync="conObj.tjf" capture="团队交付力" />
      <Score :score.sync="conObj.tkq" capture="团队客情力" />

      <Score :score.sync="conObj.cyl" capture="引流健康度" />
      <Score :score.sync="conObj.cjs" capture="客户基数" />
      <Score :score.sync="conObj.czl" capture="客户质量" />

      <Score :score.sync="conObj.pylcp" capture="引流品项产品力" />
      <Score :score.sync="conObj.pylpp" capture="引流品项匹配力" />
      <Score :score.sync="conObj.plccp" capture="留存品项产品力" />
      <Score :score.sync="conObj.plcpp" capture="留存品项匹配力" />
      <Score :score.sync="conObj.pcp1" capture="第一分流品项产品力" />
      <Score :score.sync="conObj.ppp1" capture="第一分流品项匹配力" />
      <Score :score.sync="conObj.pcp2" capture="第二分流品项产品力" />
      <Score :score.sync="conObj.ppp2" capture="第二分流品项匹配力" />

      <Score :score.sync="conObj.energy" capture="成交道场能量" />
      <el-divider />
      <p>匹配诊断：</p>
      <el-input
        v-model="conObj.diag"
        :autosize="{ minRows: 4, maxRows: 4 }"
        type="textarea"
      />
      <p>问题明确：</p>
      <el-input
        v-model="conObj.problem"
        :autosize="{ minRows: 4, maxRows: 4 }"
        type="textarea"
      />
      <el-divider />
      <p>1. 排兵：<el-button style="width: 150px;" type="success" @click="addSoldier"> 添加 </el-button></p>
      <el-table :data="soldiers">
        <el-table-column property="name" label="姓名" width="70" />
        <el-table-column property="manage" label="管理方式" width="200" />
        <el-table-column property="advantage" label="用其所长" width="200" />
        <el-table-column property="track" label="跟踪" />
        <el-table-column
          align="center"
          width="120"
        >
          <template slot-scope="{ row, $index }">
            <el-button type="primary" icon="el-icon-edit" circle @click="editSoldier(row)" />
            <el-button type="danger" icon="el-icon-delete" circle @click="delSoldier(row.id, $index)" />
          </template>
        </el-table-column>
      </el-table>
      <p>2. 布阵：</p>
      <el-input
        v-model="conObj.array"
        :autosize="{ minRows: 4, maxRows: 4 }"
        type="textarea"
      />
      <p>3. 客户管理：</p>
      <el-input
        v-model="conObj.customer"
        :autosize="{ minRows: 4, maxRows: 4 }"
        type="textarea"
      />
      <p>4. 产品矩阵：</p>
      <el-input
        v-model="conObj.product"
        :autosize="{ minRows: 4, maxRows: 4 }"
        type="textarea"
      />
      <p>5. 其他：</p>
      <el-input
        v-model="conObj.other"
        :autosize="{ minRows: 4, maxRows: 4 }"
        type="textarea"
      />
      <el-row :gutter="0" style="margin-top: 20px;margin-bottom: 20px;">
        <el-col :span="8" :offset="0">
          门店教练：<el-input v-model="conObj.coach1" style="width: 70%" />
        </el-col>
        <el-col :span="8" :offset="0">
          熠学教练：<el-input v-model="conObj.coach2" style="width: 70%" />
        </el-col>
        <el-col :span="8" :offset="0">
          同修舍总监：<el-input v-model="conObj.leader" style="width: 60%" />
        </el-col>
      </el-row>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false"> 取消 </el-button>
        <el-button type="primary" @click="updateConclusion"> 提交 </el-button>
      </div>

      <el-dialog
        width="100%"
        title="排兵"
        append-to-body
        :visible.sync="innerVisible"
      >
        <el-form ref="soldierForm" :model="soldier" label-width="110px" style="text-align: center;" :rules="rules">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="soldier.name" />
          </el-form-item>
          <el-form-item label="管理方式" prop="manage">
            <el-input v-model="soldier.manage" />
          </el-form-item>
          <el-form-item label="用其所长" prop="advantage">
            <el-input v-model="soldier.advantage" />
          </el-form-item>
          <el-form-item label="跟踪" prop="track">
            <el-input v-model="soldier.track" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="innerVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateSoldier">确 定</el-button>
        </div>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import { getSalonList2, addSalon, getConclusion, saveConclusion, getSoldiers, saveSoldier, delSoldier } from '@/api/txs'
import { regionData, codeToText } from 'element-china-area-data'
import pinyin from 'js-pinyin'
import dayjs from 'dayjs'
import Pagination from '@/components/Pagination'
import Score from '@/components/Score'

export default {
  components: { Pagination, Score },
  data () {
    return {
      diagname: '',
      diagcode: '',
      sname: '',
      scode: '',

      total: 0,
      listQuery: {
        page: 1,
        limit: 10
      },

      checkList: [],
      location: '四川省成都市武侯区',
      selectedOptions: ['51', '5101', '510107'],
      addr2: '',
      areaSelectData: regionData,
      innerVisible: false,
      dialogFormVisible: false,
      dialogFormVisible2: false,
      salonCode: 'SCCD' + dayjs().format('YYMMDD').slice(1),
      salonObj: {
        id: undefined,
        code: '',
        sname: '',
        address: '',
        area: 0,
        pic: '',
        stype: '',
        chat: '',
        developer: '',
        cnumber: 0,
        bigbend: '',
        isdiag: 0,
        createTime: new Date()
      },
      conObj: {},
      soldiers: [],
      soldier: {
        id: undefined,
        sid: undefined,
        name: '',
        manage: '',
        advantage: '',
        track: ''
      },
      list: null,
      listLoading: true,
      rules: {
        sname: [{ required: true, message: '必填项', trigger: 'blur' }],
        name: [{ required: true, message: '必填项', trigger: 'blur' }]
        // manage: [{ required: true, message: '必填项', trigger: 'blur' }],
        // advantage: [{ required: true, message: '必填项', trigger: 'blur' }],
        // track: [{ required: true, message: '必填项', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.fetchData()
  },
  methods: {
    locationHandleChange () {
      this.location =
        codeToText[this.selectedOptions[0]] +
        codeToText[this.selectedOptions[1]] +
        codeToText[this.selectedOptions[2]]
      // // console.log(this.location)
      this.salonCode =
        pinyin.getCamelChars(codeToText[this.selectedOptions[0]]).slice(0, 2) +
        pinyin.getCamelChars(codeToText[this.selectedOptions[1]]).slice(0, 2) +
        dayjs().format('YYMMDD').slice(1)
    },
    fetchData () {
      this.listLoading = true
      getSalonList2(
        this.listQuery.page,
        this.listQuery.limit,
        this.sname,
        this.scode
      ).then(res => {
        this.list = res.data.data.records
        this.total = res.data.data.total
        this.listLoading = false
        // console.log(this.list)
      })
    },
    handleCreate () {
      this.salonObj = this.$options.data().salonObj
      this.checkList = []
      this.dialogFormVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    createSalon () {
      this.$refs['dataForm'].validate(valid => {
        if (valid) {
          const tempData = Object.assign({}, this.salonObj)
          tempData.createTime = undefined
          tempData.address = this.location + '-' + this.addr2
          tempData.code = this.salonCode
          tempData.stype = this.checkList.join(' ')
          addSalon(tempData).then(res => {
            const d = res.data.data
            this.list.unshift(d)
            this.dialogFormVisible = false
            this.$notify({
              title: res.data.message,
              message: res.data.status,
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },

    handleUpdate (sn, sc, sid) {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      getConclusion(sid)
        .then(res => {
          this.conObj = res.data.data
          this.conObj.sid = sid
          loading.close()
          this.dialogFormVisible2 = true
          this.diagname = sn
          this.diagcode = sc
          // console.log(this.diagObj);
        })
        .catch(() => {
          this.$alert('获取信息故障，请联系管理员！', '服务器错误', {
            type: 'error',
            confirmButtonText: '确定'
          })
        })
      getSoldiers(sid).then(res => {
        this.soldiers = res.data.data
      })
    },

    updateConclusion () {
      const tempData = Object.assign({}, this.conObj)
      if (tempData.updateTime) {
        tempData.updateTime = undefined
      }
      // console.log(tempData)
      saveConclusion(tempData)
        .then(_ => {
          this.dialogFormVisible2 = false
          this.$notify({
            title: 'Success',
            message: '提交成功',
            type: 'success',
            duration: 2000
          })
        })
        .catch(() => {
          this.$alert('提交失败，请联系管理员！', '服务器错误', {
            type: 'error',
            confirmButtonText: '确定'
          })
        })
    },

    showSheet (id, code, name) {
      this.$router.push({
        path: '/show/report/' + id,
        query: {
          sname: name,
          scode: code
        }
      })
      // this.$alert('开发中......', 'It takes time', {
      //       type: 'error',
      //       confirmButtonText: '确定',
      //       callback: action => {
      //         this.dialogFormVisible3 = false
      //     }
      // })
    },
    addSoldier() {
      this.soldier = this.$options.data().soldier
      this.innerVisible = true
      this.$nextTick(() => {
        this.$refs['soldierForm'].clearValidate()
      })
    },
    updateSoldier() {
      this.$refs['soldierForm'].validate(valid => {
        if (valid) {
          const tempData = Object.assign({}, this.soldier)
          tempData.sid = this.conObj.sid
          saveSoldier(tempData).then(res => {
            const d = res.data.data
            const index = this.soldiers.findIndex(v => v.id === d.id)
            if (index >= 0) {
              this.soldiers.splice(index, 1, d)
            } else {
              this.soldiers.push(d)
            }
            this.innerVisible = false
          })
        }
      })
    },
    editSoldier(row) {
      this.innerVisible = true
      this.soldier = Object.assign({}, row)
      this.$nextTick(() => {
        this.$refs['soldierForm'].clearValidate()
      })
    },
    delSoldier (id, index) {
      this.$confirm('确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delSoldier(id)
          this.soldiers.splice(index, 1)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
p {
  text-align: center;
}
</style>
<style lang="scss">
.kanyu-dialog {
  .el-dialog {
    width: 100%;
  }
}
.diag-dialog {
  div.el-dialog {
    margin-top: 0 !important;
    width: 100%;
    height: 100%;
    background-color: rgb(239, 248, 255);
  }
  .el-dialog__header {
    padding: 0;
  }
  .el-dialog__title {
    color: #fff;
  }
  .el-dialog__body {
    padding: 0px 20px;
    height: 90vh;
    overflow: auto;
  }
  .el-dialog__footer {
    text-align: center;
  }
  .el-button {
    width: 40%;
  }
}
</style>
